 $card-padding-horizontal: 1.5rem;
 $card-padding-vertical: 1rem;
 
 $ngm-mapping: (
 
   /* backdrop */
   backdrop-background: color-basic-500,
   backdrop-back-background: color-basic-transparent-200,
   
   /* fullscreen */
   ngm-fullscreen-card-background: card-background-color,
 
   /* Slide out component */
   slide-out-background: card-background-color,
   slide-out-backdrop-filter: blur(5px),
   
   /* Components mappings - maps theme variables onto component variables */
 
   // Card
   card-padding-vertical: $card-padding-vertical,
   card-padding-horizontal: $card-padding-horizontal,
   card-margin-bottom: 0,
   card-padding: $card-padding-vertical $card-padding-horizontal,
 
   tag-hover-shadow: shadow,
   tag-hover-background: color-primary-hover,
   
   filter-min-width: 13rem,
   filter-max-width: 20rem,
   density-transition-duration: 300ms,
 
   reveal-transition-duration: 300ms,
 
   sidebar-width-compact-background: sidebar-background-color,
   layout-background: none,
   select-option-background: none,
 
   dialog-background: card-background-color,
 
   ngm-chip-background: background-basic-color-2,
 
   smart-filter-input-background: background-basic-color-2,
   smart-filter-input-tag-background: background-basic-color-3,
   smart-filter-tiny-min-width: 6rem,
   smart-filter-small-min-width: 8rem,
   smart-filter-medium-min-width: 10rem,
   smart-filter-large-min-width: 16rem,
   smart-filter-giant-min-width: 20rem,

   card-padding--comfortable: card-padding,
   card-padding--cosy: 0.75rem 1.25rem,
   card-padding--compact: 0.25rem 1rem,
 
   action-button-padding: 1.175rem 1.25rem,
   action-button-padding--comfortable: 1.175rem 1.25rem,
   action-button-padding--cosy: 1rem 1rem,
   action-button-padding--compact: 0.5rem,
 
   // table and grid styles
   table-row-hover-background-color: background-basic-color-4,
   smart-table-background-color: card-background-color,
   smart-table-row-hover-background-color: background-basic-color-3,
   smart-table-striped-background-color: background-basic-color-2,
   smart-table-header-background-color: background-basic-color-3,
   smart-table-scrollbar-width: 0.8rem,
   smart-table-scrollbar-color: background-basic-color-4,
   smart-table-scrollbar-background-color: card-scrollbar-background-color,
   smart-table-scrollbar-corner: 0.4rem,
   smart-table-scrollbar-hover-color: background-basic-color-4,
   smart-table-datatable-background-color: smart-table-background-color,
   smart-table-resize-handle-color: text-color-hover,
   smart-table-resize-handle-width: 5px,
 
   smart-table-pager-height: 50px,
   smart-table-pager-height--compact: 32px,
   smart-table-pager-height--cosy: 40px,
   smart-table-pager-height--comfortable: 50px,
 
   grid-striped-background: background-basic-color-3,
   grid-bordered-color: background-basic-color-3,
 
   /* Semantic Colors */
   // https://experience.sap.com/fiori-design-web/how-to-use-semantic-colors/
   // Semantic Foreground Colors
   negative-color: color-danger-600,
   critical-color: color-warning-500,
   positive-color: color-success-700,
   neutral-color: color-basic-500,
   information-color: color-primary-500,
   // Semantic Background Colors 先写死,遇到场景再来调整
   negative-background-color: #ffebeb,
   critical-background-color: #fef7f1,
   positive-background-color: #f1fdf6,
   neutral-background-color: #f4f4f4,
   information-background-color: #f5faff,

   ngm-very-negative-color: color-danger-600,
   ngm-negative-color: color-danger-400,
   ngm-critical-color: color-primary-500,
   ngm-positive-color: color-success-700,
   ngm-very-positive-color: color-success-600,
 
   trend-strong-up-color: color-success-700,
   trend-up-color: color-success-600,
   trend-sideways-color: text-basic-color,
   trend-down-color: color-danger-400,
   trend-strong-down-color: color-danger-600,
   
 );
 